<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="utf-8">
		<meta charset="utf-8">
		<title>外出登记</title>
		<style type="text/css">
			body, html{
				background-color: #e1edfe;
				margin: 0;
			}
			.topcard{
				font-family: "comic sans ms";
				font-size: 15px;
				background-color: #1eb2b1;
				height: 22vh;
				padding: 5vw;
				margin: 4vh 5vw 0 5vw;
				width: 80vw;
				border-radius: 10px;
				color: white;
				display:grid;
				grid-template-columns: 65% 35%;
			}
			.topcard div{
				margin-bottom: 0;
			}
			.pic{
				height: 100%;
				background-color: red;
				background-image: url("1.jpg");
				background-size: cover;
			}
			.topcard p{
				padding-top: 2px;
				margin-top: 1px;
				margin-bottom: 1px;
				padding-left: 5px;
			}
			.main{
				background-color: #ffffff;
				height: 58vh;
				margin-left: 10vw;
				width: 80vw;
				border-radius: 0px 0px 10px 10px;
				box-shadow:inset 0px 16px 15px -11px #a5d1cf;
			}
			.main img{
				margin-top: 6vh;
				margin-left: 10vw;
				height: 60vw;
			}
			.main p{
				text-align: center;
			}
			#date3, #time{
				font-size: 20px;
				font-weight: 700;
			}
			#time{
				padding-left: 10px;
				color:#ff2a2a;
			}
			#timer{
				font-weight: 900;
				color:#fe3434;
				font-size: 4em;
				position: absolute;
				z-index: 10;
				padding-top: 18vh;
				padding-left: 18%;
				
				-webkit-text-stroke: #fff003 2px;
			}
			.bottom{
				margin-left: 0;
				margin-right: 0;
				margin-top: 4vh;
				width: 100vw;
				text-align: center;
				font-weight: 200;
				font-size: 12px;
				color: #8d8f91;
			}
		</style>
	</head>
	<body>
		<div class="topcard">
			<div>
			<p style="font-weight: 700; padding-top: 5px; font-size: 23px; padding: 4px;" >
				<span id="surname">曹</span><span id="givenname">晋昌</span>
			</p>
			<p>
				学号：20200160303002
			</p>
			<p>
				班级：体育学院
			</p>
			<p>
				开始：<span id="date1"></span> 00:00
			</p>
			<p>
				结束：<span id="date2">2020-01-10</span> 23:59
			</p>
			</div>
			<div class="pic"></label><img id="output" style="overflow: hidden; height: 100%; width: 100%; min-height: 100%; max-height: 100%;"/>
			</div>
		</div>
		<input type="file" name="image" id="file" onchange="loadFile(event)" accept="image/*" style="display: none;"/>
		<div class="main">
			<span id="timer"><span id="countdown">181</span>S</span>
			<img src="https://ae01.alicdn.com/kf/U3c8bee9c59884da48cd2770c714641e0Y.jpg"  >
			<p><span id="date3">Date </span><span id="time"></span></p>
		</div>
		<p class="bottom">请尽快向保安出示该页面，倒计时结束后页面将失效</p>
		<script>
			function checkTime(i){
				return (i < 10) ? "0" + i : i;
			}
			setInterval(displayTime, 100);
			function displayTime (){
				var currentTime = new Date(),
				h = checkTime(currentTime.getHours()),
				m = checkTime(currentTime.getMinutes()),
				s = checkTime(currentTime.getSeconds());
				document.getElementById("time").innerHTML = h+":"+m+":"+s;
			}
		</script>
		<script>
			var timeleft = 181;
			var timer = setInterval(function(){
				timeleft--;
				document.getElementById("countdown").textContent = timeleft;
				if (timeleft <=0)
					clearInterval(timer)},1000);
		</script>
		<script>
			var today = new Date();
			var y = today.getFullYear();
			var m = today.getMonth() + 1;
			var d = today.getDate();
			document.getElementById('date1').innerHTML = y+"-"+m+"-"+d;
			document.getElementById('date2').innerHTML = y+"-"+m+"-"+d;
			document.getElementById('date3').innerHTML = y+"-"+m+"-"+d;
		</script>
	</body>
</html>